import React from 'react';
import styles from './Application.less';
import { Table, Tooltip } from 'antd';
import moment from 'moment';

const ApplicationList = (props) => {

  const {
    applicationList, applicationLoading, rowSelection, onEdit, currentPage,
    onExpandList, pageSize, unfoldCollapseKeys
  } = props;

  const columns = [
    { title: '序号', width: '5%', render: (text, record, index) => <span>{(index + 1) + (currentPage - 1) * pageSize}</span> },
    { title: '应用名称', dataIndex: 'name', key: 'name', width: '15%' },
    { title: '应用图标', dataIndex: 'icon', key: 'icon', width: '15%',
      render: (text, record, index) => <img src={text} style={{ width: '100px', height: "60px" }} />
    },
    { title: '应用地址', dataIndex: 'url', key: 'url', width: '20%' },
    { title: '业务描述', dataIndex: 'describe', key: 'describe', width: '25%' },
    {
      title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: '10%',
      render: (text, record, index) => {
        const createTime = text ? text.replace("T", " ") : "";
        const result = moment(createTime).format("YYYY-MM-DD");
        return <span>{result}</span>;
      }
    },
    {
      title: '操作', key: 'operate',
      render: (text, record) => (
        <span style={{padding: "0px 5px 0px 5px"}}>
          <Tooltip title={"编辑应用"}>
            <a onClick={() => onEdit(record)}>
              <i className="ri-edit-box-fill" style={{color: '#08c', fontSize: "20px"}}></i>
            </a>
          </Tooltip>
        </span>
      )
    }
  ];

  return (
    <div className={styles.listTable }>
      <Table
        bordered
        tableLayout={"auto"}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={applicationList}
        pagination={false}
        loading={applicationLoading}
        rowKey={record => record.id}
        onExpand={onExpandList}
        expandedRowKeys={unfoldCollapseKeys}
        scroll={{ y: (window.innerHeight - 230) }}
      />
    </div>
  );
};

export default ApplicationList;
